<template>
	<view class="example">
		<img src="@/static/myCar.png" alt="" />
		<!-- 基础用法，不包含校验规则 -->
		<uni-forms ref="carInfo" :rules="rules" :model="carInfo">
			<uni-forms-item label="车辆类型" name="carType">
				<!-- <uni-data-select v-model="carInfo.carType" :localdata="type" v-for="item in brandList">

				</uni-data-select> -->
				<!-- <uni-data-select v-model="carInfo.carType" :localdata="brandList" @change="change"> -->
				<uni-data-select :localdata="brandList" @change="change">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="车辆型号" name="typed">
				<!-- <uni-data-select v-model="carInfo.carModel" :localdata="model"></uni-data-select> -->
				<!-- <uni-data-select v-model="carInfo.carModel" :localdata="typeList"></uni-data-select> -->
				<uni-data-select v-model="carInfo.typed" :localdata="typeList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="车牌号码" name="carNum">
				<uni-easyinput v-model="carInfo.carNum" placeholder="请输入车牌号" />
			</uni-forms-item>
			<uni-forms-item label="车主姓名" name="name">
				<uni-easyinput v-model="carInfo.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput v-model="carInfo.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-data-select v-model="carInfo.defaulted" :localdata="range" @change="change1"></uni-data-select>
			<uni-forms-item label="照片" name="photo">
				<uni-file-picker v-model="photo" fileMediatype="image" :limit="1" mode="grid" @select="photoUpload"
					@delete="photoRemove" />
			</uni-forms-item>

			<button type="primary" @click="submit('carInfo')">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carInfo: {
					uid: uni.getStorageSync('userInfo').id,
					//carType: '', //车辆品牌
					defaulted: '',
					typed: '', //车辆类型
					carNum: '', //车牌号
					name: '', //姓名
					phone: '', //手机号
					img: ''
				},
				range: [{
						value: 1,
						text: "默认车辆"
					},
					{
						value: 0,
						text: "不默认车辆"
					},
				],
				photo: {},
				//车辆品牌
				brandList: [],
				//车辆类型
				typeList: [],
				rules: {
					// carType: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '车辆类型不能为空'
					// 	}]
					// },
					carModel: {
						rules: [{
							required: true,
							errorMessage: '车辆型号不能为空'
						}]
					},
					plateNo: {
						rules: [{
							required: true,
							errorMessage: '车牌号不能为空'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '车主姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					// photo: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '车辆照片不能为空'
					// 	}]
					// },
				}
			}
		},
		mounted() {
			//this.getCarType(),
			this.getBrandType()
		},
		methods: {
			change1(e) {
				console.log("e", e)
			},
			// 移除营业执照
			photoRemove(e) {
				this.photo = {}
			},
			// 营业执照上传
			async photoUpload(e) {
				this.photo.url = await this.uploadFile(e.tempFilePaths[0])
				this.carInfo.img = this.photo.url
				//console.log(this.carInfo.img);
			},
			change(e) {
				//console.log("e", e)
				this.getCarType(e)
			},
			//车辆品牌
			getBrandType() {

				uni.request({
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					url: "http://localhost:8080/user/brand/list",
					method: "get",
					success: (resp) => {
						//console.log("two", resp)
						//console.log(resp.data.code )
						console.log(resp.data.rows)
						if (resp.data.code == 200) {

							//this.brandList = resp.data.rows
							let one = resp.data.rows
							if (one.length > 0) {
								for (var i = 0; i < one.length; i++) {
									this.brandList.push({
										value: one[i].id,
										text: one[i].name
									})
								}
							}
						}
					}
				})
			},
			//车辆类型
			getCarType(id) {
				console.log("id", id)
				uni.request({
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					url: 'http://localhost:8080/user/type/list',
					method: "get",
					data: {
						bid: id
					},
					success: (resp) => {
						//console.log("one", resp)
						if (resp.data.code == 200) {
							let two = resp.data.rows
							if (two.length > 0) {
								for (var i = 0; i < two.length; i++) {
									this.typeList.push({
										value: two[i].id,
										text: two[i].name
									})
								}
							} else {
								this.typeList = two
							}
						}

					}
				})
			},
			// 文件上传
			uploadFile(imgUrl) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://localhost:8080/file/upload',
						header: {
							'Authorization': 'Bearer ' + wx.getStorageSync('token')
						},
						filePath: imgUrl,
						name: 'file',
						success: (resp) => {
							//console.log("one" + resp.data.data)
							if (resp.statusCode == 200) {
								resolve(JSON.parse(resp.data).data);
							} else {
								reject(new Error('Upload failed'));
							}
						},
					})
				})
			},

			// 表单提交
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					//发送请求
					//console.log('success', res)
					console.log("carInfo", this.carInfo)
					// uni.showToast({
					// 	title: '绑定成功',
					// 	icon: 'success',
					// 	duration: 1000
					// })
					// setTimeout(() => {
					// 	uni.redirectTo({
					// 		// 表单填写成功返回某页面
					// 		url: '/pages/test/test'
					// 	})
					// }, 2000)

					if (this.carInfo.defaulted == 1) {
						uni.setStorageSync("defaultedCar", this.carInfo)
					}
					uni.request({
						url: "http://localhost:8080/user/info",
						header: {
							'Authorization': 'Bearer ' + wx.getStorageSync('token')
						},
						method: "post",
						data: this.carInfo,
						success: (resp) => {
							console.log("resp.data", resp.data)
							if (resp.data.code == 200) {
								uni.showToast({
									title: '添加成功',
									icon: 'success',
									duration: 1000
								})
								setTimeout(() => {
									uni.switchTab({
										// 表单填写成功返回某页面
										url: '/pages/my/my'
									})
								}, 1000)
							}
						}

					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
		text-align: center;
	}

	.example>img {
		width: 400rpx;
		height: 300rpx;
	}


	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>